<template>
    <div class="detail">
        <div>
            <h2 class="report-Title">{{ $route.query.title }}</h2>
            <div class="btnBox">
                <!--              <el-button v-permission="{type:levelType,per:[195,196,197,198,199]}" v-if="isEdit && $route.query.examineState==0" type="primary" @click="submitData('save')">保存为草稿</el-button>
                <el-button v-permission="{type:levelType,per:[205,206,207,208,209]}" v-if="isEdit" type="primary" @click="submitData('assess')">自我评价</el-button>
                <el-button v-permission="{type:levelType,per:[200,201,202,203,204]}" v-if="isEdit && $route.query.examineState==0" type="primary" @click="submitData('submit')">提交审核</el-button>
                <el-button v-permission="{type:levelType,per:[210,211,212,213,214]}" v-if="isCheck" type="primary" @click="submitData('check')">报告审核</el-button>-->

                <el-button
                    v-if="isEdit && $route.query.examineState == 0"
                    type="primary"
                    @click="submitData('save')"
                    >保存为草稿</el-button
                >
                <!-- <el-button v-if="isEdit" type="primary" @click="submitData('assess')">自我评价</el-button> -->
                <el-button
                    v-if="
                        isEdit &&
                            $route.query.examineState == 0 &&
                            ($route.params.type == 'BG_LEVEL_ZY' ||
                                $route.params.type == 'BG_LEVEL_XS')
                    "
                    type="primary"
                    @click="submitData2('submit')"
                    >提交审核</el-button
                >
                <el-button
                    v-if="isEdit && $route.query.examineState == 0"
                    type="primary"
                    @click="submitData('submit')"
                    v-permission="{
                        type: levelType,
                        per: [303, 304, 305, 307, 308]
                    }"
                    >发布报告</el-button
                >
                <el-button
                    v-if="isCheck && $route.query.examineState != 2"
                    type="primary"
                    @click="submitData('check')"
                    >报告审核</el-button
                >
                <slot name="button"></slot>
                <back-button v-if="isBack"></back-button>
            </div>
        </div>
        <div class="content">
            <div class="list-box" v-if="isEdit">
                <div class="title">
                    <div>
                        <h3>一、自我诊断概述</h3>
                        <i
                            :class="
                                `${
                                    problemVisible
                                        ? 'el-icon-arrow-down'
                                        : 'el-icon-arrow-up'
                                }`
                            "
                            @click="problemVisible = !problemVisible"
                        ></i>
                    </div>
                </div>
                <div v-show="problemVisible">
                    <div class="list">
                        <div class="sub-title">1、主要问题</div>
                        <quillEditor key="problemEditor" ref="problemEditor">
                        </quillEditor>
                    </div>
                    <div class="list">
                        <div class="sub-title">2、改进措施</div>
                        <quillEditor
                            key="measureEditor"
                            ref="measureEditor"
                        ></quillEditor>
                    </div>
                    <div class="list">
                        <div class="sub-title">3、改进成效</div>
                        <quillEditor
                            key="resultsEditor"
                            ref="resultsEditor"
                        ></quillEditor>
                    </div>
                </div>
            </div>

            <div class="list-box" v-if="!isEdit">
                <div class="title">
                    <div>
                        <h3>一、自我诊断概述</h3>
                        <i
                            :class="
                                `${
                                    problemVisible
                                        ? 'el-icon-arrow-down'
                                        : 'el-icon-arrow-up'
                                }`
                            "
                            @click="problemVisible = !problemVisible"
                        ></i>
                    </div>
                </div>
                <div v-show="problemVisible">
                    <div class="list">
                        <div class="sub-title">1、主要问题</div>
                        <div
                            v-html="mainQuestion"
                             class="w-95"
                        ></div>
                    </div>
                    <div class="list">
                        <div class="sub-title">2、改进措施</div>
                        <div v-html="improve"  class="w-95"></div>
                    </div>
                    <div class="list">
                        <div class="sub-title">3、改进成效</div>
                        <div v-html="effect"  class="w-95"></div>
                        <div
                            style="color:red;margin-top: 10px;"
                            v-show="
                                $route.params.type !== 'BG_ZT' ||
                                    $route.params.type !== 'BG_LEVEL_XX' ||
                                    $route.params.type !== 'BG_JXDW'
                            "
                        >
                            备注: 包括上一阶段的诊改措施实施成效,
                            和本阶段的改进措施已取得的部分成效。
                        </div>
                    </div>
                </div>
            </div>

            <div class="list-box">
                <div class="title">
                    <div>
                        <h3>二、未达标质控点统计</h3>
                        <i
                            :class="
                                `${
                                    reachVisible
                                        ? 'el-icon-arrow-down'
                                        : 'el-icon-arrow-up'
                                }`
                            "
                            @click="reachVisible = !reachVisible"
                        ></i>
                    </div>
                </div>
                <div v-show="reachVisible">
                    <div v-for="(mData, index) in monitorData" :key="index">
                        <div class="chartBox">
                            <upStandard
                                title="标准达标率"
                                :data="mData.reachTotal"
                            ></upStandard>
                        </div>
                        <targetList
                            :tableData="
                                noReachData[index].indexQualityPointInfoList
                            "
                        ></targetList>
                    </div>
                </div>
            </div>

            <div class="list-box">
                <div class="title">
                    <div>
                        <h3>三、未完成目标质控点统计</h3>
                        <i
                            :class="
                                `${
                                    finishVisible
                                        ? 'el-icon-arrow-down'
                                        : 'el-icon-arrow-up'
                                }`
                            "
                            @click="finishVisible = !finishVisible"
                        ></i>
                    </div>
                </div>
                <div v-show="finishVisible">
                    <div class="chartBox">
                        <upStandard
                            class-name="target-standard"
                            title="目标达标率"
                            :data="monitorData[0].finishTotal"
                        ></upStandard>
                    </div>
                    <targetList :tableData="noFinishData"></targetList>
                </div>
            </div>

            <!-- <div class="list-box">
                <div class="title">
                    <div>
                        <h3>四、自定义质控点统计</h3>
                        <i
                            :class="
                                `${
                                    finishVisible
                                        ? 'el-icon-arrow-down'
                                        : 'el-icon-arrow-up'
                                }`
                            "
                            @click="finishVisible = !finishVisible"
                        ></i>
                    </div>
                </div>
                <div v-show="finishVisible">
                    <targetList :tableData="custPointInfoList"></targetList>
                </div>
            </div> -->
        </div>

        <!-- 添加自我评价-->
        <addAssess
            v-if="dialogParams.visible"
            :dialog-params="dialogParams"
        ></addAssess>
        <!-- 报告审核-->
        <checkDialog
            v-if="checkParams.visible"
            :dialog-params="checkParams"
            @check="checkReport"
        ></checkDialog>
        <!-- 预览弹窗 -->
        <el-dialog
            title="预览"
            :visible.sync="previewVisible"
            width="70%"
            :close-on-click-modal="false"
        >
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="previewVisible = false"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import upStandard from '@/components/echarts/up-standard';
import warningEchart from '@/components/echarts/warning';
import quillEditor from '@/components/editor/ue';
import targetList from '@/components/cardToList/targetList';
import addAssess from './reportManage/addAssess';
import checkDialog from '@/views/targetSystem/targetCheck/module/check';
import {
    getReportDetail,
    updateReport,
    checkReport,
    reportCheckApply,
    publicReport
} from '@/api/report';
import { getMonitorInfo } from '@/api/improve';
import { filterParams } from '@/config/utils';

export default {
    name: 'detail',
    components: {
        upStandard,
        warningEchart,
        quillEditor,
        targetList,
        addAssess,
        checkDialog
    },
    props: {
        levelType: {
            type: String
        },
        isBack: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false
        },
        isCheck: {
            type: Boolean,
            default: false
        },
        id: {
            type: [Number, String]
        },
        standardId: {
            type: [Number, String]
        }
    },
    data () {
        return {
            tableData: [],
            custPointInfoList: [],
            content: null,
            editorOption: {},
            // 整体情况
            monitorData: [{ isResize: false }],
            // 未完成目标
            noFinishData: [],
            // 未达标指标
            noReachData: [{}],
            // 预警信息
            warningData: [],
            // 预警信息
            warningChart: {
                warn: 50,
                withoutWarn: 150
            },
            // 主要问题
            mainQuestion: '',
            // 改进措施
            improve: '',
            // 改进成效
            effect: '',
            // 添加评价
            dialogParams: {
                visible: false,
                id: ''
            },
            // 报告审核
            checkParams: {
                visible: false,
                id: ''
            },
            // 目标标准id
            targetStandardId: '',
            // 显示与隐藏
            problemVisible: true,
            reachVisible: true,
            finishVisible: true,
            previewVisible: false
        };
    },
    created () {
        this.effect = this.$route.query.effect;
        this.improve = this.$route.query.improve;
        this.mainQuestion = this.$route.query.mainQuestion;

        this.targetStandardId = this.standardId;
        this.getMonitorInfo();
        this.getReportDetail();
        console.log(this.$route);
    },
    methods: {
        submitData (type) {
            switch (type) {
                case 'save':
                    const params = {
                        targetStandardId: this.targetStandardId,
                        mainQuestion: this.$refs.problemEditor.content,
                        improve: this.$refs.measureEditor.content,
                        effect: this.$refs.resultsEditor.content
                    };
                    updateReport(this.id, params)
                        .then(res => {
                            this.$message.success('操作成功');
                        })
                        .catch(() => {});
                    break;
                case 'assess':
                    this.dialogParams = {
                        visible: true,
                        id: this.id
                    };
                    break;
                case 'check':
                    this.checkParams = {
                        visible: true,
                        title: '报告审核',
                        okText: '通过'
                    };
                    break;
                case 'submit':
                    this.$confirm(
                        '发布后不可修改，您确定要发布此诊改报告吗?',
                        '提交审核',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }
                    )
                        .then(() => {
                            const params = {
                                id: this.id,
                                mainQuestion: this.$refs.problemEditor.content,
                                improve: this.$refs.measureEditor.content,
                                effect: this.$refs.resultsEditor.content,
                                examineState: 2
                            };
                            // reportCheckApply(params) 提交报告审核申请

                            // 发布报告改变报告状态为审核通过
                            publicReport(params)
                                .then(res => {
                                    this.$message.success('操作成功');
                                })
                                .catch(() => {});
                        })
                        .catch();
                    break;
            }
        },
        submitData2 (type) {
            switch (type) {
                case 'save':
                    const params = {
                        targetStandardId: this.targetStandardId,
                        mainQuestion: this.$refs.problemEditor.content,
                        improve: this.$refs.measureEditor.content,
                        effect: this.$refs.resultsEditor.content
                    };
                    updateReport(this.id, params)
                        .then(res => {
                            this.$message.success('操作成功');
                        })
                        .catch(() => {});
                    break;
                case 'assess':
                    this.dialogParams = {
                        visible: true,
                        id: this.id
                    };
                    break;
                case 'check':
                    this.checkParams = {
                        visible: true,
                        title: '报告审核',
                        okText: '通过'
                    };
                    break;
                case 'submit':
                    this.$confirm(
                        '提交后不可修改，您确定要提交审核吗?',
                        '提交审核',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }
                    )
                        .then(() => {
                            const params = {
                                id: this.id,
                                mainQuestion: this.$refs.problemEditor.content,
                                improve: this.$refs.measureEditor.content,
                                effect: this.$refs.resultsEditor.content,
                                examineState: 2
                            };
                            // reportCheckApply(params) 提交报告审核申请

                            // 发布报告改变报告状态为审核通过
                            reportCheckApply(params)
                                .then(res => {
                                    this.$message.success('操作成功');
                                })
                                .catch(() => {});
                        })
                        .catch();
                    break;
            }
        },
        // 获取整体情况数据
        getMonitorInfo () {
            if (this.targetStandardId) {
                getMonitorInfo({ targetStandardId: this.targetStandardId })
                    .then(res => {
                        console.log(res, 'monitorData');
                        this.monitorData = [res] || [];
                    })
                    .catch(() => {});
            }
        },
        // 查询报告详情
        getReportDetail () {
            getReportDetail(this.id)
                .then(res => {
                    if (res) {
                        // 如果父级无目标标准id,则从详情中取目标标准id
                        if (!this.targetStandardId) {
                            this.targetStandardId = res.targetStandardId;
                            this.getMonitorInfo();
                        }

                        this.mainQuestion = res.mainQuestion;
                        this.improve = res.improve;
                        this.effect = res.effect;
                        if (this.$refs.problemEditor) {
                            this.$refs.problemEditor.content = this.mainQuestion;
                        }
                        if (this.$refs.measureEditor) {
                            this.$refs.measureEditor.content = this.improve;
                        }
                        if (this.$refs.resultsEditor) {
                            this.$refs.resultsEditor.content = this.effect;
                        }

                        const table = (this.warningData =
                            res.targetStandardList[0]
                                .indexQualityPointInfoList || []);
                        this.noReachData = res.targetStandardList;
                        if (table.length) {
                            table.forEach(item => {
                                if (item.state != 2) {
                                    this.noFinishData.push(item);
                                }
                                if (
                                    item.sourceId == null ||
                                    item.sourceId == ''
                                ) {
                                    this.custPointInfoList.push(item);
                                }
                            });
                        }
                    }
                })
                .catch(() => {});
        },
        // 审核报告
        checkReport (examineOpinion, state) {
            // console.log('checkReport');
            const params = {
                examineOpinion: examineOpinion,
                examineState: state,
                id: this.id
            };
            const newData = filterParams(params);
            checkReport(newData)
                .then(res => {
                    this.$message.success('操作成功');
                    this.checkParams.visible = false;
                })
                .catch(() => {});
        }
    }
};
</script>

<style lang="scss" scoped>
.detail {
    box-sizing: border-box;
    .btnBox {
        text-align: right;
        /*margin: 20px 30px;*/
    }
    .report-Title {
        text-align: center;
        color: $yellow;
    }
    .content {
        /*padding: 0 30px;*/
        .list-box {
            margin-top: 20px;
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0;
                margin-bottom: 20px;
                border-bottom: 1px solid $yellow;
                > div {
                    display: flex;
                    align-items: center;
                }
                i {
                    margin-left: 10px;
                    font-weight: 600;
                    font-size: 16px;
                    color: $blue;
                    cursor: pointer;
                }
            }
            .list {
                width: 100%;
                padding-left: 30px;
                .sub-title {
                    font-weight: 600;
                    line-height: 40px;
                    font-size: 14px;
                }
                p {
                    padding-left: 30px;
                    margin: 10px 0;
                    text-indent: 24px;
                    line-height: 24px;
                    box-sizing: border-box;
                }
            }
            .chartBox {
                display: flex;
                justify-content: center;
            }
        }
    }
}
</style>
